
//dado el id del div donde se insertara el camino, genera una lista de los espacios en el camino
//surgio al cambiar el slider vertical
//el valor del space seleccionado se almacena en el atributo value del div pasado como parametro en la creacion del panel
function panelCaminos(divID, contenedorID){
	
	var _divCamino = $("#"+divID);
	var _divContenedorCamino =  $("#"+contenedorID);
	var _selectedValue = null;//deprecated: (estoy guardando el div seleccionado, para que guardo tambien el valor?? eficiencia? (un acceso menos))
	var _selectedDiv = null;
	var _divsArr = [];
	var _divsArrByValue = {};
	
	function clickEvent(){
		
		var valor = $(this).attr("value");
		if (valor == undefined) {alert("error en panel con las rutas"); return;}
		var valorRepetido = (_selectedValue == valor); //valorRepetido == true (si el cliente clickeo un nuevo space), sino false
		if(valorRepetido) {/*console.log("|||entre","valor",valor,"selectedValue",_selectedValue);*/ return;} //no necesito hacer nada, el cliente clickeo el mismo space
		
		//TODO: parent.parent (le agrego el color del fondo a la fila de la tabla)
		$(_selectedDiv).parent().parent().removeClass("ui-state-active");
//		$(_selectedDiv).parent().parent().removeClass("selectedSpace");
		$(this).parent().parent().addClass("ui-state-active");
//		$(this).parent().parent().addClass("selectedSpace");
		
		_selectedValue = valor;
		_selectedDiv = $(this);
		
		ANIMATOR.reposicionarCamaraFromDiv(_selectedValue);
	}
	
	
	//los datos vienen estructurados de la siguiente forma
	//[{value: indiceDelKeyframe, name: nombreAMostrar},{},..]
	//formato
//		<table  cellpadding="1" cellspacing="1" >
//			<tbody>
//				<tr>
//					<td style="width: 80%">	
//						<div>DATA!!!!!!!!!!</div>		
//					</td>
//					<td style="width: 10%">	
//						futuros botones
//					 </td>
//				</tr>
//			</tbody>
//		</table>
	this.generarPanel = function(data, eventoGaleria){
		
		//TODO inicializacion (pasar a una funcion)
		_divsArr = [];
		_divsArrByValue = {};
		_selectedValue = null;//deprecated (estoy guardando el div seleccionado, para que guardo tambien el valor?? eficiencia? (un acceso menos))
		_selectedDiv = null;
		$(_divCamino).html('');
		var table = $("<table cellpadding='2' cellspacing='0' width='100%'>");
		var tBody = $("<tbody>");
		
		for (var i = 0, l = data.length; i < l; i++){
			var tr = $("<tr>");
			var trHR =  $("<tr>");
			var tdHR =  $("<td colspan='2'>").append('<hr>');
			var td1 = $("<td style='width: 80%'>"); //aca va la info de la ruta
			var td2 = $("<td style='width: 10%' >"); //aca van los botones (ver imagenes, etc)
			
			
			 var div = $("<div class='ui-text-color'>").attr({ value: data[i].value}).append(data[i].texto);//valor del keyframe
//			 var div = $("<div>").attr({ value: data[i].value}).append(data[i].texto);//valor del keyframe
			 _divsArr.push(div);
			 _divsArrByValue[data[i].value] = div;//posicion dentro el camino
			 $(div).attr("index",i); //guardo
			 $(div).click(clickEvent);//funcion q se llama cuando se hace click en el div (se selecciona un space)
			 
			 var btnGaleria = $('<span title="Ver Imagen"  />');
			 $(btnGaleria).attr("valor",data[i].value);
			 $(btnGaleria).addClass("botonAbrirGaleria");
			 btnGaleria.click(eventoGaleria);
//			 var btnGaleria = $('<input type="button" />');
//			 $(btnGaleria).attr("valor",data[i].value);
//			 $(btnGaleria).addClass("botonAbrirGaleria");
//			 btnGaleria.click(eventoGaleria);
			 
			 $(td1).append(div);
			 $(td2).append(btnGaleria);
			 $(tr).append(td1);
			 $(tr).append(td2);
			 $(tBody).append(tr);
			 
			 $(trHR).append(tdHR);
			 $(tBody).append(trHR);
		}
		
		if (data.length){
				 _selectedDiv = _divsArr[0];
				 $(_selectedDiv).parent().parent().addClass("ui-state-active");
//				 $(_selectedDiv).parent().parent().addClass("selectedSpace");
		}
		
		$(table).append(tBody);
		$(_divCamino).append(table);
		 $(".botonAbrirGaleria").each(function(){$(this).button({text: false, icons: {primary: "ui-icon-image"}});});
		
		$(_divContenedorCamino).show();//mostramos todo el panel
	};
	
	//useless
//	this.getSelectedValue = function(){
//		return _selectedValue;
//		//TODO return $(_selectedDiv).attr("value");
//	};
	this.updateSelection = function(key){
		var div = _divsArrByValue[key];
		if (div == undefined || !div) return; //no se encuentra un div con ese valor de keyframe (posiblemente sea un punto intermedio o un dummy space)
		selectDivByValue(key);
	};
	
	function selectDivByValue(value){
		if (!_divsArr || !_divsArrByValue || !_divsArrByValue[value]) {/*alert("error selectDivByValue lista de camino");*/ return;}
				
		$(_selectedDiv).parent().parent().removeClass("ui-state-active");
//		$(_selectedDiv).parent().parent().removeClass("selectedSpace");
		
		 _selectedDiv = 	_divsArrByValue[value]; 
		var valor = $(_selectedDiv).attr("value");
		$(_selectedDiv).parent().parent().addClass("ui-state-active");
//		$(_selectedDiv).parent().parent().addClass("selectedSpace");
		
		_selectedValue = valor;
		//console.log("DIV Seleccionado. value: ",valor);
	}
	
	this.rewind = function(){
		if (!_divsArr) {/*alert("error rebobinando lista de camino"); */return;}
		//alert("entre val:"+ _selectedValue);
		selectDivByValue($(_divsArr[0]).attr("value"));//selecciono el primer div de la lista de caminos
		
	};
}

